<template>
    <div class="settlement">
        <div class="title">
            <span>收货地址管理</span>
            <a href="../changeaddress/main">更换收货地址</a>
        </div>
        <div class="address">
            <div class="desc">
                <div class="box">
                    <span>收货人：</span>
                    <span>张三  156***9999</span>
                </div>
                <div class="box">
                    <span>收货地址：</span>
                    <span class="addre">山东省济南市济南市槐荫区腊山河西路100号</span>
                </div>
            </div>
            <a href="../editaddress/main" class="icon">
                <span class="iconfont">&#xe64d;</span>
            </a>
        </div>
        <ul class="list">
            <li>
                <div class="top">
                    <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                    <div class="desc">
                        <h5>BCD牌精选东北大米</h5>
                        <p>￥250.00+70积分</p>
                        <div class="con">
                            <span>25kg装</span>
                            <span class="count">数量：10</span>
                        </div>
                    </div>
                </div>
                <div class="middle">
                    <span>使用积分</span>
                    <span>70</span>
                </div>
                <div class="bottom">
                    小结：<span>￥5000</span>
                </div>
            </li>
            <li>
                <div class="top">
                    <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                    <div class="desc">
                        <h5>BCD牌精选东北大米</h5>
                        <p>￥250.00+70积分</p>
                        <div class="con">
                            <span>25kg装</span>
                            <span class="count">数量：10</span>
                        </div>
                    </div>
                </div>
                <div class="middle">
                    <span>购物券</span>
                    <span>精品牛羊肉优惠券</span>
                </div>
                <div class="bottom">
                    小结：<span>￥5000</span>
                </div>
            </li>
        </ul>
        <div class="tishi">
            <span>温馨提示：</span>货到付款方式，无法获得积分奖励；
            积分可用于购物抵现，选择在线提交订单，可获得更多积分奖励
        </div>
        <div class="total">
            <p>总计：<span>200件</span></p>
            <p>合计：<span>￥5000</span></p>
        </div>
        <div class="footer">
            <div class="ft-tab ft-tab1">
                货到付款
            </div>
            <div class="ft-tab ft-tab2">
                在线提交
            </div>
        </div>
    </div>
</template>
<script>
export default {

}
</script>

<style lang="scss" scoped>
@import 'static/css/base.scss';
html,body{
    background: #f4f4f4;
}
.settlement{
    .title{
        font-size: 32rpx;
        color: #333;
        display: flex;
        justify-content: space-between;
        padding: 0 30rpx;
        height: 110rpx;
        line-height: 110rpx;
        background: #fff;
        margin-bottom: 4rpx;
        a{
            color: #22ac38;
            font-size: 28rpx;
        }
    }
    .address{
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        padding: 30rpx;
        margin-bottom: 16rpx;
        .desc{
            font-size: 26rpx;
            color:#666;
            .box{
                display: flex;
                align-items: center;
                span{
                    line-height: 50rpx;
                }
               .addre{
                   display: inline-block;
                   padding: 0;
                   margin: 0;
                   line-height: none;
                   width: 440rpx;
                   @extend %text-limit;
               }
            }
        }
    }
    .list{
        color: #333;
        font-size: 26rpx;
        li{
            background: #fff;
            padding: 0 20rpx;
            margin-bottom:8rpx;
            position: relative;
            .top{
                display: flex;
                padding: 10rpx 0;
                border-bottom: 1rpx solid #eee;
                .img{
                    width: 230rpx;
                    height: 160rpx;
                    overflow: hidden;
                    img{
                    width: 100%;
                    height: 100%;
                    }
                }
                .desc{
                    flex: 1;
                    margin-left: 30rpx;
                    p{
                    font-size: 28rpx;
                    color: #ed1c24;
                    margin: 30rpx 0;
                    }
                    .con{
                        display: flex;
                        justify-content: space-between;
                        span{
                            color: #666;
                        }
                        .count{
                            font-size: 28rpx;
                            color: #333;
                        }
                    }
                }
            }
            .middle{
                display: flex;
                justify-content: space-between;
                height: 90rpx;
                line-height: 90rpx;
                border-bottom:1rpx solid #eee;
                span:last-child{
                    color: #ed1c24;
                }
            }
            .bottom{
                text-align: right;
                height: 90rpx;
                line-height: 90rpx;
                span{
                    color: #ed1c24;
                }
            }
        }
    }
    .tishi{
        font-size: 24rpx;
        color: #333;
        text-align: center;
        width: 700rpx;
        margin: 50rpx auto;
        span{
            color: #ed1c24;
        }
    }
    .total{
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;
        background: #fff;
        height: 80rpx;
        line-height: 80rpx;
        padding: 0 30rpx;
        margin-bottom: 90rpx;
        p{
            span{
                color: #ed1c24;
            }
        }
    }
    .footer{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        margin-top: 6rpx;
        height: 90rpx;
        line-height: 90rpx;
        display: flex;
        font-size: 28rpx;
        border-top: 1rpx solid #eee;
        .ft-tab{
            flex: 1;
            text-align: center;
        }
        .ft-tab1{
            color: #ed1c24;
        }
        .ft-tab2{
            background: #22ac38;
            color: #fff;
        }
    }
}
</style>